<template>
  <a-modal
    v-model:visible="vdata.visible"
    width="40%"
    :title="vdata.isAdd ? '新建黑名单规则' : '黑名单规则详情'"
    :confirm-loading="vdata.btnLoading"
    :maskClosable="false"
    :footer="null"
    @ok="handleOkFunc"
  >
    <a-form
      ref="formRef"
      :model="vdata.saveObject"
      labelAlign="left"
      :wrapper-col="{ span: 22 }"
      layout="vertical"
      :rules="vdata.rules"
      style="margin: 30px 0 30px 20px"
    >
      <a-row>
        <a-col :span="12">
          <a-form-item label="规则名称" name="ruleName">
            <a-input v-model:value="vdata.saveObject['ruleName']" :disabled="disabled" placeholder="请输入规则名称" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="规则类型" name="ruleType">
            <a-select v-model:value="vdata.saveObject['ruleType']" :disabled="disabled" placeholder="请选择黑名单规则类型">
              <a-select-option :value="0">客户经理</a-select-option>
              <a-select-option :value="1">其他</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="机构" name="agentNo">
            <GzTreeSelect ref="gzThreeRef" v-model:value="vdata.saveObject['agentNo']" :disabled="disabled" :isNeedDefault="false" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="提示语" name="ruleTip" :wrapper-col="{ span: 23 }">
            <a-textarea v-model:value="vdata.saveObject['ruleTip']" :disabled="disabled" :rows="4" placeholder="请输入规则描述" />
          </a-form-item>
        </a-col>
        <a-col v-if="vdata.saveObject.ruleType==1" :span="12">
          <a-form-item label="限制依据" name="checkField">
            <a-select v-model:value="vdata.saveObject['checkField']" :disabled="disabled" placeholder="请选择限制依据" allowClear>
              <a-select-option value="phone">手机号</a-select-option>
              <a-select-option value="cstmNo">唯一标识 </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col v-if="vdata.saveObject.ruleType==1" :span="24">
          <a-form-item label="其他配置值" name="">
            <div class="other_fields_btn"> <a-button type="primary" :disabled="disabled" @click="addOtherField">新增</a-button> <a-button type="primary" :disabled="disabled" @click="deleteOtherField">减少</a-button> </div>
            <div v-for="(item,index) in vdata.ruleKeyOptions" :key="index" class="other_fields">
              <span>字段名称</span>
              <a-input v-model:value="item.fieldName" :disabled="disabled" placeholder="请输入其他配置值" style="width: 50%;" />
              <a-checkbox v-model:checked="item.isMust" :disabled="disabled" style="margin-left: 30px;">是否必填</a-checkbox>
            </div>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  
    <div v-if="!disabled" class="drawer-btn-center">
      <a-button :style="{ marginRight: '8px' }" style="margin-right:8px" @click="onClose">
        <close-outlined />
        取消
      </a-button>
      <a-button type="primary" :loading="vdata.btnLoading" @click="handleOkFunc">
        <check-outlined />
        保存
      </a-button>
    </div>
  </a-modal>
</template>
  
  <script lang="ts" setup>
  import { req, API_URL_BLACKLISTRULE_ADD, API_SCORE_RULE_UPDATE, API_URL_BLACKLISTRULE_DETAIL,API_URL_BLACKLISTRULE_UPDATE  } from '@/api/manage'
  import { ref, reactive, getCurrentInstance } from 'vue'
  const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties
  // import dayjs from 'dayjs';
  const props = defineProps({
    callbackFunc: { type: Function, default: null }
  })
  const formRef = ref()
  const value = ref([])
  const vdata:any = reactive({
    btnLoading: false, // 显示确定按钮loading图标
    isAdd: true, // 新增 or 修改页面标识
    visible: false, // 是否显示弹层/抽屉
    saveObject: {
     
    }, // 数据对象
    blacklistRuleId: null, // 更新对象ID
    rules: {
        ruleName: [{ required: true, message: '规则名称不能为空', trigger: 'blur' }],
        ruleType: [{ required: true, message: '请选择黑名单规则类型', trigger: 'blur' }],
        agentNo: [{ required: true, message: '请选择机构', trigger: 'blur' }],
        ruleTip: [{ required: true, message: '请输入提示语', trigger: 'change' }],
        checkField: [{ required: true, message: '请选择限制依据', trigger: 'change' }],
    },
    ruleKeyOptions: [], // 其他配置值 列表
  })
  
  function handleOkFunc() { // 点击【确认】按钮事件
    formRef.value.validate().then(() => {
      const reqData = JSON.parse(JSON.stringify(vdata.saveObject))
      reqData.extraFieldList = vdata.ruleKeyOptions
      const message = vdata.isAdd ? '新增成功' : '修改成功'
      const url = vdata.isAdd ? API_URL_BLACKLISTRULE_ADD : API_URL_BLACKLISTRULE_UPDATE
      vdata.btnLoading = true      
      req.add(url,reqData).then(res => {        
        $infoBox.message.success(message)
        props.callbackFunc()
        onClose()
      }).finally(()=>{
        vdata.btnLoading = false
      })
    }).catch(()=>{})
  }
  
  function onClose(){
    vdata.visible = false
  }
  const disabled = ref(false)
  function show(blacklistRuleId:any,type:any) { // 弹层打开事件
    disabled.value = type=== 'look' ? true : false
    vdata.isAdd = !blacklistRuleId
    vdata.btnLoading = false // 关闭loading
    // 清空验证规则
    if (formRef.value !== undefined) {
      formRef.value.resetFields()
    }
    // 数据重置
    vdata.saveObject = {}
    if(!vdata.isAdd){
      req.add(API_URL_BLACKLISTRULE_DETAIL,{ blacklistRuleId }).then(res => {
        vdata.visible = true
        vdata.ruleKeyOptions = res.extraFieldList
        console.log('vdata.ruleKeyOptionsvdata.ruleKeyOptions',vdata.ruleKeyOptions)
               
        vdata.saveObject = res        
      })
    }else{
      vdata.visible = true
    }
  }
  
  
  // 新增其他配置值
  function addOtherField(){
    if(vdata.ruleKeyOptions.length >= 4){
      $infoBox.message.warning('最多添加4个字段')
      return
    }
    vdata.ruleKeyOptions.push({
      fieldName: '',
      isMust: false
    })
  }


  // 减少其他配置值
  function deleteOtherField(){
    // if(vdata.ruleKeyOptions.length <= 1){
    //   $infoBox.message.warning('至少添加一个字段')
    //   return
    // }
    vdata.ruleKeyOptions.pop()
  }
  // 暴露方法
  defineExpose({ show })
  </script>
  <style lang="less" scoped>
  .other_fields{
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    span{
      margin-right: 30px;
    }
    
  }
.other_fields_btn{
  margin-bottom: 20px;
}
</style>
  